import { useMemo, useReducer, useRef } from 'react';
import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { FormModalStore } from './FormModalContext';
import dayjs from 'dayjs';
import type {
	ContextStore,
	FormItem,
	FormItemsType,
	FormModalProps,
	FormModalInstance
} from '../type';

// 创建ModalForm组件实例
export function useFormModal<T>(modal?: FormModalInstance<T>) {
	const modalRef = useRef<FormModalInstance<T>>();
	if (modal) {
		modalRef.current = modal;
	} else {
		modalRef.current = new FormModalStore<T>().getDetail();
	}
	return [modalRef.current];
}

// 强制更新
export const useUpdate = () => {
	const [, update] = useReducer((num: number): number => num + 1, 0);
	return update;
};

// 创建循环dom的key
export const createItemKey = (config: FormItem) => {
	return typeof config.name === 'string' ? config.name : config.name?.[0];
};

// 格式化表单值
export function formatValues<T>(values: T, formItems: FormItemsType) {
	const formatDate = (date: Date, format: string) =>
		dayjs(date).format(format || 'YYYY-MM-DD 00:00:00');
	const formatTime = (time: Date, format: string) => dayjs(time).format(format || 'HH:mm:ss');

	// 铺平配置项
	const items = formItems.flat();
	// 过滤出name为数组的配置项
	const arrayNameItems = items.filter((config) => Array.isArray(config.name));
	if (arrayNameItems.length) {
		arrayNameItems.forEach((item) => {
			const names = item.name;
			const formatFn = item.type === 'DateRangePicker' ? formatDate : formatTime;
			if (values[names[0]]) {
				const valuesDate = values[names[0]];
				values[names[0]] = formatFn(valuesDate[0], (item.props as any)?.valueFormat);
				values[names[1]] = formatFn(valuesDate[1], (item.props as any)?.valueFormat);
			}
		});
	}

	for (const key in values) {
		if (values[key] === null || values[key] === undefined) {
			delete values[key];
		}
		if ((values[key] as any)?.$isDayjsObject) {
			const config = items.find((item) => item.name === key);
			const formatFn = config.type === 'DateRangePicker' ? formatDate : formatTime;
			values[key] = formatFn(values[key] as Date, (config.props as any)?.valueFormat) as any;
		}
	}
	return values;
}

export function useModalTitle<T>(
	props: FormModalProps<T>,
	store: ContextStore<T>,
	full: boolean,
	disabled: boolean,
	setDisabled: (value: boolean) => void,
	setFull: (value: boolean) => void,
	handleClose: () => void
) {
	const { draggable = true, fullscreenBtn } = props;

	const titleNode = useMemo(
		() => (
			<div
				className="jp-modal-title-container"
				style={{ display: 'flex', justifyContent: 'space-between' }}
			>
				<div className="jp-modal-title" style={{ flex: 1 }}>
					{draggable && !full ? (
						<div
							style={{ width: '100%', cursor: 'move' }}
							onMouseOver={() => {
								if (disabled) setDisabled(false);
							}}
							onMouseOut={() => setDisabled(true)}
						>
							{store.title}
						</div>
					) : (
						<span>{store.title}</span>
					)}
				</div>
				<div
					className="jp-modal-handle"
					style={{ display: 'flex', alignItems: 'center', columnGap: 16 }}
				>
					<div
						className="jp-modal-fullscreen"
						style={{ cursor: 'pointer' }}
						onClick={() => setFull(!full)}
					>
						{full ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
					</div>
					<div
						className="jp-modal-close"
						style={{ cursor: 'pointer', marginLeft: 10 }}
						onClick={handleClose}
					>
						<CloseOutlined />
					</div>
				</div>
			</div>
		),
		[disabled, draggable, store.title, fullscreenBtn, full]
	);

	return titleNode;
}
